昨天我們已經把我們的素材都載進來也佈置在場景內了！
那今天就讓我們來讓他們動起來吧！Let's go!

Photo by Fab Lentz on Unsplash

加上鍵盤事件

讓我們來給主角移動的事件，一樣要先創建鍵盤偵聽的的物件，之後在 update 裡面寫下控制的方式。

cursors = this.input.keyboard.createCursorKeys();

不同之處

但是這邊很特別，我們使用了不同的方式來讓我們的主角移動，之前的官方範例給的素材會看到你往左走跟往右走的每一偵都放在裡面，但是我們的只有往右走的圖片，如下，並且昨天有注意看得話會發現我們昨天在設置主角移動動畫的時候，只有製作一個動畫。

另外一個處理方式

於是我們的作法不同了，這次是利用翻轉 flipX 來控制向左向右移動的效果，而我們有不特地為了轉回正面製作了一個動畫，而是利用指定他在第幾偵圖片的方式來讓他停留在正面。

  if (cursors.left.isDown) {
    player.setVelocityX(-160);
    
    player.flipX = true;
    
    player.anims.play("walking", true);
  } else if (cursors.right.isDown) {
    player.setVelocityX(160);
    
    player.flipX = false;

    player.anims.play("walking", true);
  } else {
    player.setVelocityX(0);

    player.anims.stop("walking");
    
    player.setFrame(0);
  }

設置重力與樓梯向上上升

我們將物理重力設定為向下 500 ，並且幫我們的樓梯都加上向上的速度，讓人物看起來是相對向下樓梯的感覺。

  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 500 },
      debug: false,
    },
  },

給了樓梯速度後會發現他們漂浮上去之後，就什麼都沒了，所以我們還是要持續去產生新的樓梯，這樣遊戲才能繼續進行。

  grounds
    .getChildren()
    .forEach((el) => el.setVelocityY(-100));
  grounds.getChildren().forEach((el) => {
    if (el.y < 0) {
      el.destroy();

      ground = grounds
        .create(
          Phaser.Math.Between(0, 600),
          Phaser.Math.Between(1200, 1250),
          "ground"
        )
        .setScale(0.5);
    }
  });

總結

今天做完了基礎的設置，但是還不是最完整的，讓我們明天繼續努力吧！

tags: Phaser Game 2020鐵人賽